<template>
  <div id="PieFailurerate"></div>
</template>

<script>
import * as echarts from 'echarts/core'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
export default {
  name: 'PieFailurerate',
  data () {
    return {
      myChart: null,
      // 数据
      simdata: {
        // 总量
        a: 100,
        // 离线设备
        b: 10,
        // 正常设备
        c: 90
      },
      // 设备离线率
      percent: null,
      // 数据
      faildata: [
        {
          value: 10,
          name: '离线设备'
        },
        {
          value: 90,
          name: '正常设备'
        }
      ]
    }
  },
  created () {
    echarts.use([
      TooltipComponent,
      LegendComponent,
      PieChart,
      CanvasRenderer,
      LabelLayout
    ])
  },
  mounted () {
    // 计算中间饼图使用率
    this.percent = (this.simdata.b / this.simdata.a).toFixed(2) * 100 + '%'
    // 找到这个容器
    // console.log('this.$el', this.$el)
    this.myChart = echarts.init(this.$el)
    const that = this
    // 配置项
    let option = {
      // 鼠标移入上面时候-提示框组件
      tooltip: {
        trigger: 'item'
      },
      // 工具箱-下载
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      // 实例title
      legend: {
        top: '5%',
        left: 'left',
        // 纵向布局
        orient: 'vertical',
        textStyle: {
          color: '#666',
          fontSize: 12
        },
        icon: 'circle',
        itemHeight: 6,
        padding: [10, 20, 10, 40],
        formatter: function (params) {
          console.log('params', params)
          var target
          console.log('that.faildata', that.faildata)
          that.faildata.forEach(v => {
            if ((v.name = params)) target = v.value
          })

          return `${params}  ${target} ` + '台设备'
        }
      },
      series: [
        {
          name: '设备离线率',
          type: 'pie',
          // 饼图半径
          radius: ['50%', '70%'],
          // 相对于父容器比例
          center: ['50%', '50%'],
          // 防止标签间的重叠-默认开启true
          avoidLabelOverlap: false,
          padding: [0, 0, 0, -50],
          // 数据名称-静态
          label: {
            position: 'center',
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
            color: '#FEFEFF',
            formatter:
              '{active|离线率}' + '\n\r' + '{total|' + this.percent + '}',
            rich: {
              total: {
                fontSize: 24,
                color: '#333333',
                align: 'center',
                lineHeight: 30,
                fontWeight: 'bold',
                lineHeight: 30
              },
              active: {
                fontSize: 15,
                color: '#999999',
                align: 'center',
                lineHeight: 30
              }
            }
          },
          // 选中图例-标题样式
          emphasis: {},
          // 引导线
          labelLine: {},
          data: [
            {
              value: this.simdata.b,
              name: '离线设备',
              itemStyle: { color: '#60d0dc' }
            },
            {
              value: this.simdata.c,
              name: '正常设备',
              itemStyle: { color: '#6a9fff' }
            }
          ]
        }
      ]
    }
    // 渲染数据
    this.myChart.setOption(option)
  }
}
</script>
<style lang="scss" scoped>
#PieFailurerate {
  width: 100%;
  height: 100%;
}
</style>
